<template>
	<view class="home">
		<!-- 头部 -->
		<view class="hearder">
			<!-- 搜索 -->
			<view class="sousuo">
				<u-search shape="square" placeholder="搜索(如设备类型、品牌、型号等)" v-model="keyword"></u-search>
				<view class="sear">搜索</view>
			</view>
			<!-- 菜单 -->
			<view class="caidan">
				<u-dropdown>
					<u-dropdown-item v-model="value1" title="类型" :options="options1"></u-dropdown-item>
					<u-dropdown-item v-model="value2" title="品牌" :options="options1"></u-dropdown-item>
					<u-dropdown-item v-model="value3" title="区域" :options="options3"></u-dropdown-item>
					<u-dropdown-item v-model="value4" title="排序" :options="options4"></u-dropdown-item>
				</u-dropdown>
			</view>
		</view>
		<!-- 内容 -->
		<view class="main">
			<!-- 1 -->
			<view class="main-item" @click="toxiangqing">
				<view class="main-item-left">
					<image class="img" src="/static/dome/c1.jpg" mode=""></image>
					<view class="iconeye">
						<u-icon class="eye" name="eye"></u-icon>579
					</view>
					<text class="jishou">寄售</text>
				</view>
				<view class="main-item-right">
					<view class="right-title">三一东风10023车载泵</view>
					<view class="right-model">2020年/国五</view>
					<view class="right-tag">
						<text class="tags">热门</text>
						<text class="tags">现货</text>
						<text class="distance">
							<u-icon name="map"></u-icon>距离不详
						</text>
					</view>
					<view class="right-price">
						<text class="prices">33.8万</text>
						<u-button class="btn" type="error" shape="circle" size="mini">立即咨询</u-button>
					</view>
				</view>
			</view>
			<!-- 2 -->
			<view class="main-item">
				<view class="main-item-left">
					<image class="img" src="/static/dome/c2.jpg" mode=""></image>
					<view class="iconeye">
						<u-icon class="eye" name="eye"></u-icon>329
					</view>
					<text class="jishou">寄售</text>
				</view>
				<view class="main-item-right">
					<view class="right-title">中联奔驰56米泵车</view>
					<view class="right-model">2019年/国五</view>
					<view class="right-tag">
						<text class="tags">热门</text>
						<text class="tags">现货</text>
						<text class="distance">
							<u-icon name="map"></u-icon>距离不详
						</text>
					</view>
					<view class="right-price">
						<text class="prices">43.8万</text>
						<u-button class="btn" type="error" shape="circle" size="mini">立即咨询</u-button>
					</view>
				</view>
			</view>
		</view>

		<!-- 自定义底部TabBar -->
		<cust-tab :current="0"></cust-tab>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				keyword: '',
				value1: 1,
				value2: 2,
				value3: 3,
				value4: 4,
				options1: [{
						label: '挖掘机',
						value: 1,
					},
					{
						label: '装载机',
						value: 2,
					},
					{
						label: '搅拌车',
						value: 3,
					}
				],
				options3: [{
						label: '北京',
						value: 1,
					},
					{
						label: '天津',
						value: 2,
					},
				],
				options4: [{
						label: '智能排序',
						value: 1,
					},
					{
						label: '车龄最短',
						value: 2,
					},
				],

			}
		},
		onLoad() {
			let _this = this;
			_this.$api.index({

			}).then(res => {
				console.log(res);
			});
		},
		methods: {
			toxiangqing() {
				uni.navigateTo({
					url: "/pages/index/details"
				})
			},
		}
	}
</script>

<style lang="scss" scoped>
	// 头部
	.hearder {
		background-color: #fff;

		// 搜索
		.sousuo {
			padding: 0 20rpx;
			position: relative;

			.sear {
				width: 100rpx;
				height: 60rpx;
				text-align: center;
				line-height: 60rpx;
				font-size: 32rpx;
				color: red;
				position: absolute;
				top: 0;
				right: 20rpx;
			}
		}

		// 菜单
		.caidan {
			margin-top: 20rpx;
		}
	}

	// 内容区
	.main {
		background-color: #f6f7f9;
		padding: 60rpx 20rpx 0;

		.main-item {
			display: flex;
			background-color: #fff;
			// border-top-left-radius: 20rpx;
			// border-top-right-radius: 20rpx;
			padding: 30rpx;
			border-bottom: 2px solid #f6f7f9;



			// 左
			.main-item-left {
				position: relative;
				width: 220rpx;
				height: 200rpx;
				margin-right: 20rpx;

				.img {
					border-radius: 10rpx;
					width: 100%;
					height: 100%;
				}

				.iconeye {
					font-size: 24rpx;
					position: absolute;
					left: 8rpx;
					bottom: 4rpx;
					color: #fff;

					.eye {
						margin-right: 5rpx;
						font-size: 30rpx
					}
				}

				.jishou {
					position: absolute;
					top: 0;
					right: 0;
					font-size: 24rpx;
					width: 60rpx;
					height: 40rpx;
					text-align: center;
					line-height: 40rpx;
					background-color: #fb463f;
					color: #fff;
				}
			}

			// 右
			.main-item-right {
				width: 420rpx;

				.right-title {
					font-size: 28rpx;
					font-weight: 700;
				}

				.right-model {
					margin-top: 10rpx;
					font-size: 24rpx;
					color: #a5a4a7;
				}


				.right-tag {
					margin: 20rpx 0;

					text {
						font-size: 24rpx;
					}

					.tags {
						width: 70rpx;
						height: 40rpx;
						text-align: center;
						line-height: 40rpx;
						display: inline-block;
						margin-right: 10rpx;
						background-color: #fde0d7;
						color: #fb3232;
					}

					.distance {
						color: #888888;
					}
				}

				.right-price {
					display: flex;
					justify-content: space-between;

					.prices {
						font-size: 30rpx;
						font-weight: 700;
						color: #fb463f;
					}

					.btn {
						margin: 0;
						font-weight: 700;
						color: #fb463f;
					}

				}

			}

		}


	}
</style>
